<template>
  <div class="request-party-service-manage">
    <div class="app-container">
      <div class="mainbox">
        <Header :header-name="$route.meta.title"/>
        <div class="request-party-service-manage-body">
          <el-form ref="form" :model="form" inline label-width="80px" class="search-form">
            <el-form-item prop="monitorType">
              <el-select v-model="form.monitorType" clearable placeholder="监控类型">
                <el-option
                  v-for="(item, index) in dictOptions.monitorType"
                  :key="index"
                  :label="item.systemCode + ' / ' + item.systemName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="mainId">
              <el-input v-model="form.status" clearable placeholder="监控状态"/>
            </el-form-item>
            <!--            开始结束时间-->
            <el-form-item prop="startTime">
              <el-date-picker
                v-model="form.startTime"
                type="datetime"
                placeholder="开始时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 200px;"
              />
            </el-form-item>
            <el-form-item prop="endTime">
              <el-date-picker
                v-model="form.endTime"
                type="datetime"
                placeholder="结束时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 200px;"
              />
            </el-form-item>
            <el-form-item class="query-action">
              <el-button type="primary" @click="getTableData"> 查询</el-button>
              <el-button :loading="loading" @click="resetBtn"> 重置</el-button>
            </el-form-item>
          </el-form>

          <!-- 表格数据视图 -->
          <div>
            <FlexTable
              v-loading="loading"
              border
              :data="tableData"
              :columns="columnsOptions"
            />
            <el-pagination
              :page-size="pagination.pageSize"
              :current-page.sync="pagination.pageNo"
              layout="prev, pager, next, jumper"
              :total="pagination.totalPage"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
        <create-service ref="createService" :manage-type="2" @interfaceServiceRefresh="getTableData"/>
      </div>
    </div>
  </div>
</template>

<script>
import {getSystemListApi} from '@/api/serviceManage/requestPartyServiceManage'
import {listMonitorLog} from '@/api/serviceMonitor/MonitorLog'
import dictMixin from '@/utils/mixins/dict'

export default {
  name: 'MonitorLog',
  mixins: [
    dictMixin(['monitorType@Local', 'monitorLogStatus@Local'])
  ],
  data() {
    return {
      form: {
        monitorType: '',
        startTime: '',
        mainId: '',
        endTime: '',
        status: ''
      },
      dataList: null,
      dialogVisible: false,
      systemIdList: [],
      loading: false,
      tableData: [],
      columnsOptions: [
        {label: '监控类型', prop: 'monitorType',
        // 枚举转换
          customRender: scope => {
            return this.getDictText('monitorType', scope.row.monitorType)
          }
        },
        {label: '日志产生时间', prop: 'monitorTime'},
        {label: '状态', prop: 'status',
          customRender: scope => {
            return this.getDictText('monitorLogStatus', scope.row.status)
          }
        }
      ],
      pagination: {
        pageNo: 1,
        pageSize: 10,
        totalPage: 1
      }
    }
  },
  created() {
    // 获取系统
    getSystemListApi()
      .then(({code, data}) => {
        if (code === '00000') {
          this.systemIdList = data
        }
      })
    this.getTableData()
  },
  methods: {
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.pagination.pageNo = val
      this.getTableData()
    },
    getTableData() {
      this.setLoading(true)
      listMonitorLog({
        ...this.form,
          ...this.pagination
      }).then(({code, data}) => {
        if (code === '00000') {
          this.tableData = data.rows
          this.pagination.totalPage = data.totalPage
          this.pagination.pageNo = data.pageNo
          this.pagination.pageSize = data.pageSize
        }
      }).finally(() => {
        this.setLoading(false)
      })
    },
    getDictText(dictName, value) {
      const dict = this.dictOptions[dictName]
      if (dict) {
        // eslint-disable-next-line eqeqeq
        const target = dict.find(item => item.value == value)?.label
        return target ?? value
      }
      return value
    },
    resetBtn() {
      this.form = {
        monitorType: '',
        startTime: '',
        mainId: '',
        endTime: '',
        status: ''
      }
      Object.assign(this.pagination, {
        pageNo: 1,
        pageSize: 10,
        totalPage: 0
      })
      this.getTableData()
    },
    setLoading(loading) {
      this.loading = loading
    },
    showMessage(type, message) {
      this.$message[type](message)
    }
  }
}
</script>

<style lang="scss" scoped>
.request-party-service-manage {
  background: #F2F2F2;

  &-body {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    height: calc(100vh - 254px);
    overflow-y: auto;
  }

  .el-pagination {
    text-align: right;
    margin-top: 20px;
  }

  .el-tree {
    ::v-deep .el-tree-node__expand-icon {
      font-size: 18px;
    }
    .custom-tree-node {
      width: calc(100% - 30px);
      display: flex;
      align-items: center;
      padding-right: 20px;

      > span:first-child {
        display: inline-block;
        width: calc(100% - 50px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 40px;
      }

      .tree-btn {
        .el-switch {
          margin-top: -4px;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>

